<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('Summernote富文本编辑器')" />
    <th:block th:include="include :: summernote-css" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-info-add"  >


            <!---选项卡开始-->

            <div class="row">
                <div class="col-sm-12">
                    <div class="tabs-container">
                        <ul class="nav nav-tabs">
                            <li class="active"><a data-toggle="tab" href="#tab-1" aria-expanded="true">季度OKR</a>
                            </li>
                            <li class=""><a data-toggle="tab" href="#tab-2" aria-expanded="false">年度OKR</a>
                            </li>
                        </ul>
                        <div class="tab-content">
                            <div id="tab-1" class="tab-pane active">
                                <!--季度目标开始--->
                                <div class="panel-body">
                                    <div class="panel panel-primary">
                                        <div class="panel-heading">
                                            先定它一个小目标，整几个亿你说了算！
                                        </div>
                                        <div class="panel-body" style="padding: 1px;">
                                            <div class="form-group">
                                                <div class="col-sm-12">
                                                    <textarea id="seasonObjective" name="seasonObjective" style="border: hidden;margin: 0;width: 100%;height: 100%;" class="form-control" required    placeholder="目标不是工作职责的罗列，而是经过筛选的重点目标，如果不是需要团队付出额外努力才能达成，请不要写,目标要与上下级配合团队、人员、部门对齐，避免各自为政。"></textarea>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <button type="button" class="btn btn-block btn-outline btn-success"  onclick="createKeyResult('0')" >添加Key Result</button>
                                </div>
                                <!--季度目标结束--->

                                <!--季度KR开始--->
                                <div class="row" style="margin-top: 5px;">
                                    <div class="col-sm-12">
                                        <div class="ibox float-e-margins">
                                            <div class="ibox-title">
                                                <h5>Key Result 建议在3个左右 <small class="m-l-sm">对自己狠一点，定一个可衡量的Key 。</small></h5>
                                            </div>
                                            <div class="ibox-content"   id="seasonKeys" >

                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!--季度KR开始--->
                            </div>
                            <div id="tab-2" class="tab-pane">
                                <!--年度目标结束--->
                                <div class="panel-body">
                                    <div class="panel panel-primary">
                                        <div class="panel-heading">
                                            今年用你的雄心壮志，去征服这个世界吧！
                                        </div>
                                        <div class="panel-body" style="padding: 1px;">
                                            <div class="form-group">
                                                <div class="col-sm-12">
                                                    <textarea id="yearObjective" name="yearObjective" style="border: hidden;margin: 0;width: 100%;height: 100%;" class="form-control" required    placeholder="目标不是工作职责的罗列，而是经过筛选的重点目标，如果不是需要团队付出额外努力才能达成，请不要写,目标要与上下级配合团队、人员、部门对齐，避免各自为政。"></textarea>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <button type="button" class="btn btn-block btn-outline btn-success" onclick="createKeyResult('1')"    >添加Key Result</button>
                                </div>
                                <!--年度目标结束--->
                                <!--年度KR开始--->
                                <div class="row" style="margin-top: 5px;">
                                    <div class="col-sm-12">
                                        <div class="ibox float-e-margins">
                                            <div class="ibox-title">
                                                <h5>Key Result 建议在3个左右 <small class="m-l-sm">对自己狠一点，定一个可衡量的Key 。</small></h5>
                                            </div>
                                            <div class="ibox-content"   id="yearKeys" >

                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!--年度KR开始--->
                            </div>
                        </div>


                    </div>
                </div>


            </div>
            <!---选项卡结束-->

            <!---数据隐藏域开始-->

            <input name="cycleItem" id="cycleItem"     type="hidden">

            <!---数据隐藏域结束-->
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: summernote-js" />
    <script type="text/javascript">
        $(document).ready(function () {
            $('.summernote').summernote({
                lang: 'zh-CN'
            });
        });
        var edit = function () {
            $("#eg").addClass("no-padding");
            $('.click2edit').summernote({
                lang: 'zh-CN',
                focus: true
            });
        };
        var save = function () {
            $("#eg").removeClass("no-padding");
            var aHTML = $('.click2edit').summernote('code');
            $('.click2edit').summernote('destroy');
        };
        var prefix = ctx + "okr/info"
        $("#form-info-add").validate({
            focusCleanup: true
        });

        function submitHandler() {

            // if ($.validate.form()) {
            //     $.operate.save(prefix + "/add", $('#form-info-add').serialize());
            // }
            var seasonItem = [];   //存放季度KR
            var yearItem = [];   //存放年度KR
            //季度OKR目标
            var seasonObjective = $("#seasonObjective").val();
            //年度OKR目标
            var yearObjective = $("#yearObjective").val();
            var yearLen  = $("#yearKeys").find("textarea");
            var seasonLen  = $("#seasonKeys").find("textarea");
            if(yearLen.length>0)
            {
                for(var i=0;i<yearLen.length;i++)
                {
                    var itemVal = $(yearLen[i]).val();
                    yearItem.push(itemVal);
                }
            }
            if(seasonLen.length>0)
            {
                for(var j=0;j<seasonLen.length;j++)
                {
                    var itemVal = $(seasonLen[j]).val();
                    seasonItem.push(itemVal);
                }
            }
            var cycleItemObj = {
                "seasonObjective":seasonObjective,
                "yearObjective":yearObjective,
                "seasonItem":seasonItem,
                "yearItem":yearItem
            };
            $.operate.save(prefix + "/add", cycleItemObj);
        }

        function createKeyResult(type){
            var keyResult = " \n" +
                "                                    <div class=\"panel panel-info\">\n" +
                "                                        <div class=\"panel-heading\">\n" +
                "                                            结果要可衡量，描述产出，而不是工作量！\n" +
                "                                               </div>\n" +
                "                                         <div class=\"panel-body\" style=\"padding: 1px;\">\n" +
                "                                           <div class=\"form-group\">\n" +
                "                                                <div class=\"col-sm-12\">\n" +
                "                                                    <textarea  " +
                "                                                       style=\"border: hidden;margin: 0;width: 100%;height: 100%;\" class=\"form-control\" required  " +
                "                                                           placeholder=\"用数字衡量价值，用结果对自己负责。\"></textarea>\n" +
                "                                                </div>\n" +
                "                                            </div>\n" +
                "                                        </div>\n" +
                "                                    </div>\n" +
                "                               ";
            if(type==1){
                $("#yearKeys").append(keyResult);
            }
            else {
                $("#seasonKeys").append(keyResult);
            }

        }
    </script>
</body>
</html>